<template>
  <div class="showImage">
    <div class="imgTop" v-if="imgSrc">
      <span style="line-height:30px;font-weight:bold;">显示图片</span>
      <i class="el-icon-close" @click="close"></i>
    </div>
    <div class="img">
      <img :src="imgSrc" ondragstart='return false;'>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    imgSrc: String,
  },
  data() {
    return {}
  },
  methods: {
    close(){
      this.$emit('closeImg')
    }
  },
  mounted(){
    const imgBox = document.getElementsByClassName('showImage')[0]
    imgBox.onmousedown = function(event){
      let rex = event.clientX - imgBox.offsetLeft
      let rey = event.clientY - imgBox.offsetTop
      document.onmousemove = e=>{ 
        let xX = 0
        let yY = 0
        xX = e.clientX
        yY = e.clientY
        imgBox.style.left = (xX-rex) + "px"
        imgBox.style.top = (yY-rey) + "px"
      }
    }
    document.onmouseup=()=>{
      document.onmousemove=null
    }
  }
}
</script>

<style scoped>
.showImage {
	position:absolute;
	width:auto;
	height:auto;
	z-index:4;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.showImage .imgTop {
	background-color:#f4f4f4;
	height:30px;
	padding-left:10px;
}
.showImage .imgTop i {
	float:right;
	height:30px;
	width:30px;
	line-height:30px;
}
.showImage img {
	max-width: 60vw;
	max-height: 60vh;
}
</style>